<template>
  <a-modal title="套餐项目变更" :width="640" :visible="visible" :confirmLoading="loading" @ok="handleSubmit()"
    @cancel="handleCancel">
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="套餐项目">
          <a-select mode="multiple" show-search b-model="form.checkItemIdList" :filter-option="filterOption"
            style="width: 100%" placeholder="请选择" @change="handleChange">
            <a-select-option v-for="item in list" :key="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import api from '@/api/tijian/compackage'
import api2 from '@/api/tijian/tijian'

export default {
  props: {
    model: {
      type: Object,
      default: () => null
    }
  },
  watch: {

  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      title: '新建套餐',
      loading: false,
      visible: false,
      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
      form: {
        id: null,
        checkItemIdList: []
      },
      //  选项
      list: []
    }
  },
  created() {
  },
  methods: {
    show(id) {
      this.visible = true
      this.form.id = id
      this.form.checkItemIdList = []
      this.getList()
      this.getDetail()
    },
    getList() {
      api2.queryAllCheckItem().then(res => {
        this.list = res.data
      })
    },
    getDetail(id) {
      api.getDetail({ id: this.form.id }).then(res => {
        for (let i = 0; i < res.data.itemList.length; i++) {
          if (res.data.itemList[i].packageSelect > 0) {
            this.form.checkItemIdList.push(res.data.itemList[i].id)
          }
        }
      })
    },
    handleSubmit() {
      api.updateItem(this.form).then(res => {
        this.loading = false
        this.$message.success('修改成功');
        this.visible = false
      }).catch(err => {
        this.loading = false
        this.$message.error('修改失败');
      })

    },
    handleChange(e) {
      console.log(e);
      this.form.checkItemIdList = e
    },
    handleCancel() {
      this.visible = false
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  }
}
</script>
